<template>
  <div class="inBodyFullHeight flex flex-col justify-start items-start w-full ">
    <div class="p-4">
      <el-card :class="(isCollapse?' w-[calc(100vw-64px-2rem)] ':' w-[calc(100vw-200px-2rem)] ')+' h-[calc(100vh-88px-2rem)] '">
        <div class="flex flex-col ">
          <span class="text-xl font-bold">退款记录</span>

          <div class="pt-4">
            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">支付ID:</span>
              <el-input v-model="selectPayBackOrderAO!.payDtoId" clearable class="w-36" placeholder="请输入支付ID"></el-input>
            </div>

            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">退款ID:</span>
              <el-input v-model="selectPayBackOrderAO!.payBackDtoId" clearable class="w-36" placeholder="请输入退款ID"></el-input>
            </div>

            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">退款金额:</span>
              <el-input v-model="selectPayBackOrderAO!.backMoneyBegin" clearable class="w-36" placeholder="请输入退款金额"></el-input>
              <span>~</span>
              <el-input v-model="selectPayBackOrderAO!.backMoneyEnd" clearable class="w-36" placeholder="请输入退款金额"></el-input>
            </div>

            <div class="flex flex-row justify-start items-center float-left pr-4 pt-4">
              <span class="w-20">退款时间:</span>
              <el-date-picker v-model="selectPayBackOrderAO!.backTimeBegin" type="datetime" 
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择退款时间"/>
              <span>~</span>
              <el-date-picker v-model="selectPayBackOrderAO!.backTimeEnd" type="datetime" 
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="new Date(2000, 1, 1, 23, 59, 59)" placeholder="请选择退款时间"/>
            </div>
          </div>

          <div class="pt-4 flex felx-row justify-start items-center">
            <el-button type="" @click="backReset">重置</el-button>
            <el-button type="primary" @click="backSelect">查询</el-button>
          </div>

          <div class="pt-4" v-loading="backSelectLoading">
            <el-table class="h-[calc(100vh-27rem)]" :border="true" :data="backPageInfo?.list" style="width: 100%":row-key="(row:any)=>{row.payDtoId}">
              
              <el-table-column prop="backTime" label="退款时间"  show-overflow-tooltip> </el-table-column>
              <el-table-column prop="backMoney" label="退款金额"  show-overflow-tooltip> </el-table-column>
              <el-table-column prop="payDtoId" label="支付ID"  show-overflow-tooltip></el-table-column>
              <el-table-column prop="payBackDtoId" label="退款ID" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>

          <div class="m-4 flex flex-row justify-end">
            <el-pagination 
                background 
                v-model:current-page="selectPayBackOrderAO.pageNum"
                v-model:page-size="selectPayBackOrderAO.pageSize"
                layout="total, sizes, prev, pager, next, jumper" 
                :page-count="Number(backPageInfo?.totalPage)"
                :total="Number(backPageInfo?.total)"
                @size-change="backSelect"
                @current-change="backSelect"
                prev-text="上一页"
                next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>

</template>

<script setup lang="ts" name="SouYinTai">
import { permissionList } from '@/config/PermissionConfig';
import { usePayBackOrderHooks } from './PayBackOrderHooks';
import InnerDialog from '@/components/utils/InnerDialog.vue';

let {
  isCollapse, 
  payBackOrderDialog,
  selectPayBackOrderAO, backSelectLoading, backPageInfo,
  backReset, backSelect,
} = usePayBackOrderHooks();

</script>

<style scoped></style>
